<template>
  <div class="layui-panel" id="App">
    <div style="padding: 32px;">
      <h1>App组件</h1>
      <h1>App组件里data的age是：{{ age }} name是：{{ name }}</h1>
      <button @click="age++">年龄+1</button>
      <button @click="name='马云'">修改name</button>
      <child></child>
    </div>
  </div>
</template>
<script>
import {computed} from "vue";
import Child from "@/components/child.vue";

export default {
  name: "App",
  components: {Child},
  data() {
    return {
      name: "陶品奇",
      age: 22,
      array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  provide() {
    return {
      name: computed(() => this.name),
      age: computed(() => this.age),
      array: computed(() => this.array)
    }
  }
}
</script>
<style lang="less">
#App {
  height: 400px;
}
</style>
